@charset "utf-8";
@import "reset.scss";
@import "common";
.hovShadow {
    &:hover {
        box-shadow: 0px 4px 6px 0px #b3afaf;

    }
}
.wrap {
    width: 1920px;
    margin: 0 auto;
    header {
        position: relative;
        height: 649px;

        .headImg {
            height: 649px;

            img {
                height: 649px;
            }
        }
    }

    main {
        margin: 0 auto;
        padding: 0 48px;
        width: 1208px;
        background-color: #f3f3f3;
        .mainHd {
            display: flex;
            justify-content: space-between;
            padding: 100px 0;
            .mainHdImg {
                width: 695px;
                height: 318px;
            }
            .mainHdIntroduce {
                width: 506px;
                height: 318px;
                display: flex;
                justify-content: flex-end;
                align-items: flex-end;
                div {
                    p {
                        font-size: 22px;
                        color: #999898;
                        margin-top: 42px;
                        span {
                            display: inline-block;
                            width: 101px;
                            height: 35px;
                            line-height: 35px;
                            text-align: center;
                            background-color: #cf0d0d;
                            color: #ffffff;
                        }
                    }
                }
            }
        }

        .mainList {
            margin-bottom: 100px;
            ul {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 39px 0;
                border-bottom: 1px solid #979797;
                border-top: 1px solid #979797;
                li {
                    margin-right: 26px;
                    font-size: 22px;
                    color: #979797;
                    &:hover {
                        color: #cf0d0d;
                    }
                }
            }
        }
        
        .mainExhibition {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            >div {
                margin-bottom: 10px;
                width: 592px;
                border: solid 1px #bfbfbf;
                background-color: #ffffff;
                img {
                    width: 592px;
                }
                .mainExIntroduce {
                    padding: 0 10px;
                    >div {
                        height: 265px;
                        .title {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding: 31px 0;
                            >p {
                                height: 27px;
                                line-height: 27px;
                                font-size: 24px;
                                color: #383636;
                            }
                            >div {
                                height: 27px;
                                line-height: 27px;
                                font-size: 22px;
                                color: #999999;
                            }
                        }
                        >p {
                            font-size: 22px;
                            color: #999898;
                            margin-bottom: 21px;
                            span {
                                display: inline-block;
                                width: 101px;
                                height: 35px;
                                line-height: 35px;
                                text-align: center;
                                background-color: #cf0d0d;
                                color: #ffffff;
                            }
                        }
                    }
                }

            }
        }
        
        .mainFooter {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 100px;
            width: 1202px;
            >div {
                display: flex;
                flex-direction: column;
                justify-content: center;
                flex-wrap: wrap;
                .loading {
                    width: 67px;
                    img {
                        width: 67px;
                        height: 67px;
                    }
                    p {
                        font-size: 18px;
                        letter-spacing: -1px;
                        color: #999898;
                        text-align: center;
                    }
                }
                .on {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    align-self: center;
                    margin-top: 20px;
                    width: 41px;
                    height: 30px;
                    background-color: #cf0d0d;
                }
            }
        }
    }

}